<template>
  <div class="app-assign-user">
    <span v-show="!appCode" class="list-empty-text">{{ hintText }}</span>
    <div v-if="!!appCode">
      <!-- 搜索区域 -->
      <SelfAdaption>
        <Form
          :model="searchForm"
          ref="userSearchForm"
          slot="adaption-bar"
          label-position="top"
          class="ivu-form-no-margin-bottom"
          inline
        >
          <Form-item prop="userId" :label="$t('module.userManage.account')">
            <Input
              type="text"
              :maxlength="30"
              v-model.trim="searchForm.userId"
              :placeholder="$t('module.userManage.warning.enterUserAccount')"
              @on-enter="search"
            ></Input>
          </Form-item>
          <Form-item prop="userName" :label="$t('module.userManage.name')">
            <Input
              type="text"
              :maxlength="30"
              v-model.trim="searchForm.userName"
              :placeholder="$t('module.userManage.warning.enterUserName')"
              @on-enter="search"
            ></Input>
          </Form-item>
          <!-- 所属组织 -->
          <Form-item prop="orgName" :label="$t('module.userManage.organization')">
            <Input
              type="text"
              style="position: absolute; z-index: 999; width: 80%; opacity: 0;"
              @click.native="selectOrganization"
            ></Input>
            <Input
              type="text"
              :maxlength="30"
              v-model.trim="searchForm.orgName"
              :placeholder="$t('module.userManage.selectOrganization')"
              icon="ios-paper-plane-outline"
              clearable
              readonly
              @on-clear="resetOrganization"
              @on-click="selectOrganization"
            ></Input>
          </Form-item>

          <!-- 查询\重置按钮 -->
          <Form-item prop="button" class="search-solt-btn">
            <RPButton optType="search" @click="search" />
            <RPButton optType="reset" @click="reset" />
          </Form-item>
        </Form>
      </SelfAdaption>
      <InnerPageTable ref="userTable" :config="tableConfig">
        <!-- 
      <div slot="handle-bar">
        <RPButton optType="search" @click="search" />
        <RPButton optType="reset" @click="reset" />
      </div> 
        -->
        <div slot="table-bar">
          <RPButton
            optType="common"
            :text="$t('module.appManage.assignUser')"
            @click="assignUser"
            :disabled="!appCode"
          />
          <RPButton optType="batch" @click="deleted()" />
        </div>
      </InnerPageTable>
    </div>
  </div>
</template>
<script>
import { appAssignUserColumns } from './columns.js'
import locales from './locales.js'
import appAssignUserAPI from '@/api/appAssignUserAPI.js'
import AppSelectUser from './AppSelectUser.vue'
import selectOrganization from '../userCenter/userManage/selectOrganization.vue'
import { queryOrgsByOrgPaths } from '@/api/orgApi'

export default {
  mixins: [locales],
  props: {
    appInfo: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      appCode: '',
      appId: '',
      appType: '',
      appName: '',
      topic: '',
      hintText: this.$t('module.appManage.warning.hintSelectApp'),
      searchForm: {
        applicationCode: '',
        applicationId: '',
        applicationName: '',
        selected: true,
        userId: '',
        userName: '',
        orgPath: '',
        orgName: ''
      }
    }
  },
  computed: {
    tableConfig() {
      return {
        loadDataFn: tableObj => {
          let { responseProcess, param } = tableObj
          appAssignUserAPI.queryAssignedUser(param).then(data => {
            if ('RIPPLES.crc' == this.appCode) {
              data.records.forEach(user => {
                if (user.category == 1 || user.category == 2) {
                  user._disabled = true
                }
              })
            }
            // 查询所属组织
            let orgPaths = data.records.map(user => {
              return user.orgPath
            })
            if (orgPaths.length > 0) {
              queryOrgsByOrgPaths(orgPaths).then(orgs => {
                data.records.forEach(user => {
                  let userOrg = orgs.find(org => {
                    return org.orgPath == user.orgPath
                  })
                  user._hasOrgInfo = true
                  if (userOrg) {
                    user.orgName = userOrg.orgName
                    user.orgNameFullPath = userOrg.orgNameFullPath
                  } else {
                    user.orgName = user.orgPath
                    user.orgNameFullPath = user.orgPath
                  }
                })

                tableObj.tableData = data.records
              })
            }

            responseProcess(data)
          })
        },
        initParam: this.searchForm,
        columnsFn: appAssignUserColumns.bind(this),
        isPage: true,
        autoFirst: false,
        simplePage: true,
        rowClassNameFn: this.rowClassName // 自定义行样式
      }
    }
  },
  created() {
    this.setAppInfo(this.appInfo)
  },
  mounted() {},
  methods: {
    // 自定义行样式
    rowClassName(row) {
      //locked:0-有效，1-无效
      if (row.locked == 1) {
        return 'tableDisableStyle'
      }
    },
    search(page) {
      this.$refs['userTable'].load(this.searchForm, page)
    },
    reset() {
      this.searchForm.orgPath = ''
      this.$refs['userSearchForm'].resetFields()
      this.search(1)
    },
    assignUser() {
      new this.$pageModal(
        AppSelectUser,
        {
          props: {
            appCode: this.appCode,
            appId: this.appId,
            appName: this.appName,
            appType: this.appType,
            topic: this.topic
          }
        },
        data => {
          data && this.search()
        }
      )
    },
    deleted(userId) {
      let selectedIds
      if (userId) {
        selectedIds = [userId]
      } else {
        selectedIds = this.getSelectedIds()
        if (selectedIds.length == 0) {
          this.$message.error(this.$t('module.appManage.warning.selectUsers'))
          return
        }
      }
      new $confirm(this.$t('module.appManage.warning.confirmDeleteAssignedUser'), this).then(() => {
        let param = {
          userApplicationInfoVo: {
            applicationCode: this.appCode,
            applicationType: this.appType,
            topic: this.topic
          },
          userIds: selectedIds
        }
        appAssignUserAPI.deleteAssignedUser(param).then(res => {
          this.$message.success({
            content: this.$t('common.deleteSuccess'),
            duration: 3
          })
          this.search()
        })
      })
    },
    getSelectedIds() {
      let list = this.$refs['userTable'].getSelectioned() || []
      let ids = []
      for (let { id } of list) {
        ids.push(id)
      }
      return ids
    },
    setAppInfo(appInfo) {
      this.appCode = appInfo.appCode
      this.appId = appInfo.appId
      this.appType = appInfo.appType
      this.appName = appInfo.appName
      this.topic = appInfo.topic
      this.searchForm.applicationCode = this.appCode
      this.searchForm.applicationId = this.appId
      this.searchForm.applicationName = this.appName
    },
    // 选择组所属组织
    selectOrganization() {
      new this.$pageModal(
        selectOrganization,
        {
          props: {}
        },
        data => {
          if (data) {
            this.searchForm.orgName = data.orgName
            this.searchForm.orgPath = data.orgPath
          }
        }
      )
    },
    // 清除所属组织
    resetOrganization() {
      this.searchForm.orgPath = ''
    }
  },
  watch: {
    appInfo(newVal, oldVal) {
      this.setAppInfo(newVal)
      this.$nextTick(() => {
        this.search(1)
      })
    }
  },
  directives: {}
}
</script>
<style lang="less">
.app-assign-user {
  position: relative;
  display: inline-block;
  width: 65%;
  padding-top: 10px;
  border-right: 1px solid #dcdee2;
  border-bottom: 1px solid #dcdee2;
  border-left: 1px solid #dcdee2;

  .list-empty-text {
    position: absolute;
    top: 50%;
    left: 50%;
    color: #909399;
    font-size: 14px;
    transform: translate(-50%, -50%);
  }

  .ivu-input-icon {
    font-size: 16px !important;
    line-height: 34px !important;
    transform: scaleX(-1);
    transform: scaleX(-1);
    transform: scaleX(-1);
    transform: scaleX(-1);
    cursor: pointer;

    /* IE */
    filter: fliph;
  }

  .ivu-spin {
    text-align: left;
  }

  .spin-icon-load {
    animation: ani-demo-spin 1s linear infinite;
  }
}
</style>
